<template>
	<view>
		<view v-if="isLoading" style="width: 100%;height: calc(100vh);position: absolute;z-index: 10000;">
			<image src="../../../static/icon/loading.png" style="width: 110rpx;height: 110rpx;" class="loading" mode="">
			</image>
		</view>
		<view @click="closeAny" v-if="showToken||isShow10||isShow40||isShow20||this.$store.state.Show"
			style="width: 100%;height: calc(100vh);position: absolute;z-index: 100;"></view>
		<view class="TC" style="position: relative;z-index: 101;" v-if="showToken">
			<view class="box" style="height: 708rpx;width: 84%;left: 8%;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 40rpx;line-height: 100rpx;">提示</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="color: #9471fe;font-size: 40rpx;">
							登录已过期！请重新登录！
						</view>
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="cleartoken()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>

		<!-- 	<view class="TC" v-if="this.$store.state.Show1">
			<view class="bigbox">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 32rpx;line-height: 100rpx;">确定要放弃以下抽取的奖励吗？</view>
				
						<view>
							
							<image :src="imgURL+this.jiangping.icon" alt="">
						
						</view>
						<view style="color: rgb(204,204,204);
    font-size: 17px;margin-bottom: 20rpx;">{{jiangping.name}}</view>
						<view>
							<image style="width: 106rpx;height: 106rpx;" src="../../../static/icon/gameicon/jt7.png"
								mode=""></image>
						</view>
						<view style="color: rgb(148, 113, 254);margin-bottom: 12rpx;
    font-size: 16px;">放弃将获得以下数字藏品</view>
						<view>
							<image
								style="box-shadow: 2px 5px 7px rgb(204 204 204);    margin: 10rpx 0px;width: 524rpx;height: 180rpx;"
								src="../../../static/icon/icon2/10Cool.png" mode=""></image>
						</view>
						<view class="yd1" style=" color: rgb(244,120,189);font-size: 34rpx;">
							Cool贝卡×1
						</view>

						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC1()">确认放弃</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view> -->

		<view class="TC" style="position: relative;z-index: 101;" v-if="isShow10">
			<view class="box" style="height: 708rpx;">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 36rpx;line-height: 100rpx;">提示</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view style="font-size: 17px;
		    color: #9471fe;width: 426rpx;text-align: center;">{{msg}}</view>
						<view class="btnA" v-if="msg=='您还没有绑定收货地址哦!'">
							<button type="button" style="color: #FFFFFF; " @click="goBend">去绑定</button>
						</view>
						<view class="btnA" v-else-if="msg=='cool贝不足'">
							<button type="button" style="color: #FFFFFF; " @click="goShouye">去攒cool贝</button>
						</view>
						<view class="btnA" v-else>
							<button type="button" style="color: #FFFFFF; " @click="closeTC10()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>

		<view class="TC" style="position: relative;z-index: 101;" v-if="isShow40">
			<!--  -->
			<view class="bj">
			</view>
			<view class="box">
				<view class="box1">
					<view class="box1-a">
						<view style="color: #9471fe;font-size: 36rpx;line-height: 100rpx;">{{djjpdata.item_name}}</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->
						<view>
							<!-- 图片代替 -->


							<!-- <image style="width: 332rpx;
    height: 332rpx;" :src="imgURL+djjpdata.picture" alt=""> -->
							<view
								:style="'background-image: url('+imgURL+djjpdata.item_icon+');background-size:100%;background-position:100% ;background-repeat:no-repeat;width:226rpx;height:426rpx'">
							</view>
							<!-- <view :style="'background-image: url('+imgURL+jpitem.item_icon+');background-size:100%;background-position:100% 	;background-repeat:no-repeat;width:245px;'"></view> -->
							<!-- 视频 -->
							<!-- <video src=""></video> -->
						</view>
						<view style="text-align: center;color: #DE62D2;width: 400rpx;">{{djjpdata.remark}}</view>

						<!-- 	<view style="font-size: 17px;
			    color: rgb(204,204,204);"></view> -->
						<view class="btnA" style="margin-top: 28rpx;">
							<button type="button" style="color: #FFFFFF; " @click="closeTC40()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>

		<view v-if="this.$store.state.Show">
			<view v-if="isShow20&&jpitem.picture!=''">
				<!-- <image class="dtP" style="z-index: 2000; position: relative;"
				:src="imgURL+jpitem.picture" mode=""></image> -->
				<view
					:style="'background-image: url('+imgURL+jpitem.picture+');background-size:100%;z-index: 2000;position: absolute;background-position:100% 	;background-repeat:no-repeat;width:100%;height:calc(100vh)'">
					<!-- <image src="../../../static/icon/leftop1.png" style="    width: 60rpx;
	height: 60rpx;
	position: absolute;
	top: 38rpx;
	left: 54rpx;" mode=""></image> -->
					<image :src="imgURL+jpitem.picture" class="tcdh" mode=""
						style="z-index: 1999;position: relative;height: calc(100vh);width: 100%;"></image>
					<view style="display: flex;align-items: center;">
						<view class="tcdh" @click="closeTC20()" style="font-size: 40rpx;
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		display: flex;
		    align-items: center;
				background: linear-gradient(to right, #A272FC, #DE62D2);
				color: #fff;
				width: 150rpx;
				height: 100rpx;
				border-radius: 40px;
				line-height: 100rpx;
				text-align: center;
				justify-content: center;
				z-index: 2000;
		">

							关闭</view>
						<view class="tcdh" style="color: #fff;font-size: 36rpx;margin-left: 20rpx;z-index: 2001;position: absolute;top: 6rpx;
		left: 26%;">*长按图片保存到本地</view>
					</view>
				</view>
			</view>
		</view>

		<view class="TC" style="position: relative;z-index: 101;" v-if="this.$store.state.Show">
			<!--  -->
			<view class="bj" @click="closeAny">
			</view>



			<view class="box" style="z-index: 101;">
				<view class="box1">
					<view class="box1-a" v-if="ittype==5">
						<view style="font-size: 36rpx;
						color: #9471fe;margin-top: 40rpx;">{{jpitem.item_name}}</view><!--  -->
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view>
							<!-- 图片代替 -->

							<image :src="ewmtp" mode="" style="width: 256rpx;height: 256rpx;margin: 30rpx 0rpx;">
							</image>
							<!-- <image :src="imgURL+jpitem.item_icon" alt=""> -->
							<!-- 视频 -->
							<!-- <video src=""></video> -->
						</view>
						<!-- <view style="border-radius: 32px;
    background: linear-gradient(to right, #A272FC, #DE62D2);color: #fff;width: 156rpx;
    text-align: center;" @click="goewm()">点击进入</view> -->
						<view>长按识别二维码领取</view>

						<!-- <view class="btnA" style="margin-top: 20rpx;">
							<button type="button" style="color: #FFFFFF; " @click="closeTC30()">确 认</button>
						</view> -->
					</view>
					<view class="box1-a" v-else>
						<view style="color: #9471fe;font-size: 36rpx;line-height: 100rpx;">获得奖励</view>
						<!-- <view style="color: rgb(189,189,189);">祝福视频</view> -->

						<view>
							<!-- 图片代替 -->


							<image style="width: 332rpx;
    height: 332rpx;" :src="imgURL+jpitem.item_icon" alt="">
								<!-- <view :style="'background-image: url('+imgURL+jpitem.item_icon+');background-size:100%;background-position:100% 	;background-repeat:no-repeat;width:245px;'"></view> -->
								<!-- 视频 -->
								<!-- <video src=""></video> -->
						</view>
						<view class="yd">{{jpitem.item_name}}</view>
						<view style="text-align:center;width: 400rpx;color: #DE62D2;">{{jpitem.item_remark}}</view>
						<!-- 	<view style="font-size: 17px;
			    color: rgb(204,204,204);"></view> -->
						<view class="btnA">
							<button type="button" style="color: #FFFFFF; " @click="closeTC30()">确 认</button>
						</view>
					</view>
					<view class="box2-a">
					</view>
				</view>
			</view>
		</view>
		<!-- <view style="height: 200rpx;width: 100%;background-color: #9471fe;"></view> -->
		<!-- <BackPage></BackPage> -->
		<view ref="onebigbox" class="mack-a" :style=" 'filter: blur('+this.$store.state.mackNum30+'px);'">
			<view class="LargeTop">
				<view class="toptext">
					<text class="text-a">幸运大转盘</text>
					<text class="text-b">
						<view>剩余次数{{shengyu}}次</view>
					</text>
				</view>
				<view class="topimg">
					<image style="width: 640rpx;
    height: 650rpx;" src="../../../static/icon/zpw.png" mode=""></image>
					<!-- :style="  'transform: rotate('+xznum+'deg);'" -->
					<!-- +'-data-v-3660c872' -->
					<view v-if="lottery_Items<=4" class="xz" ref="zp" :style="{
						'animation-name':'move1'+i+bsf,
						'animation-duration':7+'s',
						'animation-timing-function':'ease-in-out',
						'animation-iteration-count':'infinite',
						'animation-play-state': dong,
						}">
						<!-- 	<image  
									src="../../../static/icon/z1.png" mode=""></image> -->
						<view v-for="(item,index) in lottery_Items" :class="'tb-x'+index"
							:style="'animation-play-state:' +dong+';'">

							<view class="zpwz" style="font-size: 12px;color: #000;width: 260rpx;
    text-align: center;">{{item.item_name}}</view>
							<image style="margin: 0px; width: 70rpx;height: 70rpx;" :src="imgURL+item.item_icon">
							</image>

						</view>
						<!-- <view class="tb-x1" :style="  'transform: rotate('+fxznum+'deg);'">
										<image style="margin: 0px; width: 100rpx;height: 100rpx;" :src="imgURL+this.lottery_Items[0].picture"></image>
										<view style="font-size: 12px;">{{this.lottery_Items[0].item_name}}</view>
									</view> -->

					</view>

					<!-- +'-data-v-3660c872' this.i-->
					<view v-else class="xz" ref="zp" :style="{
						'animation-name':'move2'+i+bsf,
						'animation-duration':7+'s',
						'animation-timing-function':'ease-in-out',
						'animation-iteration-count':'infinite',
						'animation-play-state': dong,
						'-webkit-animation-name':'move2'+i+bsf,
						'-webkit-animation-duration':7+'s',
						'-webkit-animation-timing-function':'ease-in-out',
						'-webkit-animation-iteration-count':'infinite',
						'-webkit-animation-play-state': dong,
						'-o-animation-name':'move2'+i+bsf,
						'-o-animation-duration':7+'s',
						'-o-animation-timing-function':'ease-in-out',
						'-o-animation-iteration-count':'infinite',
						'-o-animation-play-state': dong
						
						}">
						<!-- 	<image  
									src="../../../static/icon/z1.png" mode=""></image> -->


						<view v-for="(item,index) in lottery_Items" :class="'tb-x'+index"
							:style="'animation-play-state:' +dong+';'" @click="zpxq(index)">

							<view class="zpwz" style="font-size: 12px;color: #000;width: 260rpx;
    text-align: center; ">{{item.item_name}}</view>
							<image style="margin: 0px; width: 70rpx;height: 70rpx;" :src="imgURL+item.item_icon">
							</image>

						</view>
						<!-- <view class="tb-x1" :style="  'transform: rotate('+fxznum+'deg);'">
										<image style="margin: 0px; width: 100rpx;height: 100rpx;" :src="imgURL+this.lottery_Items[0].picture"></image>
										<view style="font-size: 12px;">{{this.lottery_Items[0].item_name}}</view>
									</view> -->

					</view>


					<image style="position: absolute;z-index: 889;top: 206rpx;width: 120rpx;
    height: 146rpx;" src="../../../static/icon/choujiang.png" mode="">
					</image>
					<!-- <image v-else style="position: absolute;z-index: 889;top: 20rpx;" src="../../../static/icon/z2.png"
						mode=""></image> -->
					<view v-if="zcchoujiang" style="width: 120rpx;
    height: 120rpx;
  
    position: absolute;
    z-index: 99999;
    top: 41%;
    border-radius: 136rpx;" @click="cjopenTC()"></view>
					<view v-else style="width: 120rpx;
		height: 120rpx;
		  
		position: absolute;
		z-index: 99999;
		top: 41%;
		border-radius: 136rpx;"></view>
				</view>
				<view class="top-a">
					<view class="time">
						<image src="../../../static/icon/xx.png" mode=""></image>
						<text>获得&nbsp;"管好每一度"&nbsp;勋章解锁抽奖功能，每人可抽奖23次</text>
					</view>
					<view style="color: #CACACA; font-size: 13px;display: flex;">
						<view>收货地址: {{address}}</view>
						<view style="    color: rgb(255, 255, 255);
			    background-color: rgb(204, 204, 204);
			    font-size: 12px;
			    width: 62px;
			    text-align: center;
			    border-radius: 15px;
			    margin-left: 12px;
					z-index: 2000;" @click="fixaddress1()" v-if="address=='暂未绑定收货地址'">去绑定</view>
						<view style="    color: rgb(255, 255, 255);
					background-color: rgb(204, 204, 204);
					font-size: 12px;
					width: 62px;
					text-align: center;
					border-radius: 15px;
					margin-left: 12px;
					z-index: 2000;" @click="fixaddress()" v-else>去修改</view>
					</view>
					<view class="rem">
						抽奖记录
					</view>
				</view>
			</view>
			<view class="pagelist" style="text-align: center;color: rgb(158, 158, 158);
    font-size: 40rpx;padding-top: 60rpx;
    margin-bottom: 60rpx;" v-if="jiangping.length==0">暂无抽奖记录</view>
			<view class="pagelist" v-else>
				<!--  -->
				<!-- @scrolltoupper="topshuax" -->
				<!-- @scrolltolower="shuax" -->
				<!-- upper-threshold="800" -->

				<scroll-view lower-threshold="10" @scrolltolower="jl" :scroll-top="weizhi" class="scroll-box" style="height: calc(34vh);"
					@refresherrestore="onRestore" refresher-background="rgb(247,245,251)" :refresherThreshold="45"
					@refresherrefresh="fh_lastye" :refresher-triggered="sxFlag" :refresher-enabled="true"
					scroll-y="true" @scroll="scrollEvent">
					<!-- 单条数据 -->
					<!-- :style="'height:'+height+'px'" -->
					<!-- <view v-if="jlFlag1">
						<view v-if="pageNum!=1" @click="jl1" style="text-align: center; height:80rpx;line-height: 40rpx;color: rgb(202, 202, 202);">点我回到上一页~</view>
					</view>
					<view v-else style="text-align: center;color: #CACACA;">
						
							<u-loading mode="circle"></u-loading>
							<view>请稍等,正在前往上一页哦~</view>
							
					</view> -->
					<view class="listname" v-for="(item,index) in jiangping">
						<view class="ln-top">
							<view class="list" @click="showTC(index)">
								<view>
									<image v-if="item.item_icon!=''" :src="imgURL+item.item_icon"></image>
									<image v-else src="../../../static/icon/icon1/lw1.png" mode=""></image>
								</view>
								<view style="width: 100px;">
									<view class="Bb">{{item.item_name}}</view>
									<!-- <view class="Mg">消耗20Cool贝</view> -->
									<!-- http://113.31.109.223:8000/file/file/download?fileId= -->
									<!-- <view style="background: linear-gradient(to right, #A272FC, #DE62D2);
			    text-align: center;
			    width: 74px;
			    coloe: #fff;
			    color: #fff;
			    border-radius: 12px;
			    font-size: 12px;
					margin-bottom: 12rpx;
					margin-top: 6rpx;
					line-height: 38rpx;
					height: 20px;" @click="openTC1_1()">放弃奖励</view> -->
								</view>
							</view>
							<view class="text Mg" style="font-size: 24rpx;    margin-top: 18px;">
								<view style="text-align:left;width: 200rpx;" v-if="item.create_time!='暂无'">
									{{item.create_time | formatDate('-')}}
								</view>
								<view style="text-align:left;width: 200rpx;" v-else>{{item.create_time}}</view>
								<view class="states" style="display: flex;flex-direction: row;align-items: center;">
									<view>
										<view v-if="item.express_order==''&&item.item_type==3"
											style="color: rgb(207,145,255);font-size: 34rpx;margin: 4rpx 0px;">
											状态：未发货</view>
										<view v-else-if="item.express_order!=''&&item.item_type==3"
											style="color: rgb(207,145,255);font-size: 34rpx;margin: 4rpx 0px;">
											状态：已发货</view>
										<!-- <view v-else-if="jiangping.item_type!=3" style="color: rgb(207,145,255);font-size: 34rpx;margin: 4rpx 0px;">
											状态：暂无</view> -->
										<view v-if="item.item_type==3">收起/展开发货信息</view>
									</view>
									<view v-if="item.item_type==3">
										<image v-if="item.kai=='aa'" class="name" style="transform: rotate(180deg);"
											src="../../../static/icon/10.png" @click="ShouSuo1(index)"></image>
										<image v-else src="../../../static/icon/10.png" @click="ShouSuo(index)"></image>
									</view>
								</view>
								<!-- <view>12: 30: 15</view> -->
							</view>
						</view>

						<view class="ln-bottom" v-if="item.kai=='aa'&&item.height">
							<view style="width: 420rpx;">

								<view>收货地址: {{item.express_address| shaddress()}}</view>
								<view>心运单号: {{item.express_order}}</view>
							</view>
							<view style="    background: rgb(204,204,204);
			    color: #fff;
			    width: 62px;
			    text-align: center;
			    border-radius: 26px;
			    font-size: 12px;
			    height: 25px;
			    line-height: 25px;
			 
			}">
								修改
							</view>
						</view>
					</view>
						<view v-if="((pageNum-1)*pageSize)+jiangping.length==count" style="text-align: center;height:400rpx;color: #CACACA;">已经到底了哦~</view>
					<view @click="jl" v-else-if="jlFlag&&((pageNum-1)*pageSize)+jiangping.length<count"
						style="text-align: center;height:400rpx;color: #CACACA;margin-top:20rpx">加载更多</view>
					
					<view v-else>
						<view  style="text-align: center;height:400rpx;color: #CACACA;">
						
							<u-loading mode="circle"></u-loading>
							<view>请稍等,正在前往下一页哦~</view>
						
						</view>
				
					</view>
					
					<!-- <view v-else style="text-align: center;height:200rpx;"> -->
					<!-- <u-loading mode="circle"></u-loading> -->
					<!-- </view> -->
					<!-- <view style="text-align: center;height:200rpx;color: #CACACA;">下拉去下一页哦~</view> -->

				</scroll-view>

			</view>

			<!-- 	<view class="fPage">
				<view class="NumberBox">
					<view @click="reduce">上一页</view>
					<view>{{num}}</view>
					<view @click="add">下一页</view>
				</view>
			</view> -->
		</view>
		<TabBar></TabBar>

	</view>
</template>

<script>
	import TabBar from '@/components/TabBar.vue'
	import uniRequest from '@/until/uni-request.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	// import BackPage from '../../../components/BackPage.vue'
	export default {
		computed: { //加载数据过程loading
			...mapState(["isLoading"])
		},
		components: {
			// BackPage
			TabBar
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '/') {
				value = value * 1000
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}`;
			},
			shaddress: function(value) {
				let aa = value.split(',')[2]
				return aa
			}
		},

		onShow() {


			this.closeTC()
			this.changeicondzp()
			this.getAddresslist()
			this.address = uni.getStorageSync('address').address

			if (uni.getStorageSync('i')) {
				this.i = uni.getStorageSync('i')
			}
			console.log(this.address);
		},

		data() {
			return {
				// xlstatus: 'loading',
				listAll: [], //所有数据
				showList: [], //可视区域显示的数据				
				itemHeight: 100, //每条数据所占高度
				showNum: 1, //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
				top: 0, //偏移量
				scrollTop: 0, //卷起的高度
				startIndex: 0, //可视区域第一条数据的索引
				endIndex: 10, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面
				isShow40: false,
				djjpdata: {

				},
				isShow30: false,
				i: '4',
				dong: 'paused',
				lottery_Items: '',
				xznum: 0,
				fxznum: 0,
				showToken: false,
				isShowfa: false,
				height: 100,
				isShow20: false,
				isShow10: false,
				msg: '',
				jpitem: [],
				imgURL: 'http://113.31.109.223:8000/file/file/download?fileId=',
				mackNum: this.$store.state.mackNum,
				isMack: true,
				// isShow: this.$store.state.Show,
				num: 1,
				pageNum: 1,
				weizhi: 0,
				sxFlag: false,
				pageSize: 10,
				go: false,
				data: [],
				// jiangping: {
				// 	item_type: '',
				// 	name: '暂无',
				// 	status: '暂无',
				// 	time: '暂无',
				// 	address: '暂无',
				// 	order: '暂无',
				// 	icon: '',
				// },
				jiangping: [],
				address: '',
				zcchoujiang: true,
				xztime: 1000,
				jplevel: '',
				ewmlj: '',
				ewmtp: '',
				ittype: '',
				bsf: '',
				shengyu: '',
				jlFlag: true,
				jlFlag1: true,
				count: 0,
				dataList: [{
					address: '长沙市雨花区半山国际中心',
					number: '顺丰快递/7758520889',
					state: '已发货',
					name: '奖品名称',
					xh: '消耗20Cool贝',
					time: '2022 / 01 / 06 12: 30: 15'
				}]
			}
		},
		created() {

			this.Rafflestatus()
			this.getchouJlist()
			// console.log(uni.getStorageSync('address').address);
			this.address = uni.getStorageSync('address').address
		},
		mounted() {
			this.bsXz()
			this.getBSF()
		},

		methods: {
			//计算可视区域数据
			getShowList() {
				this.listAll = this.jiangping
				this.startIndex = Math.floor(this.scrollTop / this.itemHeight); //可视区域第一条数据的索引
				this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引

				this.showList = this.listAll.slice(this.startIndex, this
					.endIndex) //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1

				this.top = this.scrollTop - (this.scrollTop % this
					.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
				// console.log(this.startIndex);
				// console.log(this.endIndex);
				// console.log(this.showList);
				// console.log(this.top);
				// if(this.top==800){

				// this.top=0	
				// 		// this.pageNum++

				// 		// this.getchouJlist()

				// 	return
				// }
			},
			xlsx() {
				console.log(91);
			},
			shuax() {
				console.log('tt');
				this.pageNum = this.pageNum + 1
				// this.weizhi=0
				console.log(this.pageNum);
				return
			},
			topshuax() {
				if (this.pageNum != 1) {
					this.pageNum = this.pageNum - 1
					return
				}
			},
			//区域滚动事件
			scrollEvent(e) {
				// this.getShowList()
				this.scrollTop = e.detail.scrollTop
				// this.jl()
			},
			/** 节流 **/
			jl() {
				let that = this
				if (!this.jlFlag) {
					return
				}
				this.jlFlag = false
				// console.log(this.scrollTop);

				setTimeout(() => {
					// that.jlDoing()
					this.goTop()
					that.jlFlag = true
				}, 1000)
				// 函数被点击一次触发执行后，2秒内再点击函数不会被触发事件，可理解为每2秒触发一次事件。点我去下一页
			},
			jl1() {
				let that = this
				if (!this.jlFlag1) {
					return
				}
				this.jlFlag1 = false
				setTimeout(() => {
					// that.jlDoing()
					this.fh_lastye()
					that.jlFlag1 = true
				}, 500)
				// 函数被点击一次触发执行后，2秒内再点击函数不会被触发事件，可理解为每2秒触发一次事件。点我去下一页
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				// console.log("onRestore");
			},
			fh_lastye() {
				this.weizhi = this.scrollTop
				this.sxFlag = true
				if (this.pageNum == 2) {
					this.pageNum--
					this.$nextTick(() => {
						this.weizhi = 0

					});
					this.sxFlag = true
					setTimeout(() => {
						this.getchouJlist()
						this.sxFlag = false
					}, 2000)
				} else {
					this.weizhi = this.scrollTop
					this.pageNum--
					this.$nextTick(() => {
						this.weizhi = 0
						// this.getchouJlist()
					});
					setTimeout(() => {
						this.getchouJlist()
						this.sxFlag = false
					}, 2000)
				}
			},
			goTop(e) {
				//视图会发生重新渲染
				this.weizhi = this.scrollTop
				console.log(this.scrollTop);
				// this.weizhi = 0
				//当视图渲染结束 重新设置为0
				// if(this.scrollTop>900){
				// 	if(this.pageNum<this.count/10){
				// 		this.pageNum++

				// 		this.$nextTick(() => {

				// 			this.getchouJlist()
				// 			this.weizhi = 50
				// 		});
				// 	}else{
				// 		return
				// 	}
				// }

				// if(this.scrollTop>900){
				if (this.pageNum < this.count / 10) {
					this.pageNum++

					this.$nextTick(() => {
						this.weizhi = 0
						this.getchouJlist()
					});
				} else {
					return
				}
				// }
				// uni.showToast({
				// 	icon: "none",
				// 	title: "纵向滚动 scrollTop 值已被修改为 0"
				// })
			},


			goShouye() {
				this.closeTC10()
				uni.navigateTo({
					url: "/"
				})
			},
			goBend() {
				this.closeTC10()
				uni.navigateTo({
					url: "/pages/Mypage/ShopAddress/ShopAddress"
				})
			},
			closeAny() {
				console.log(11);
				this.showToken = false
				this.isShow10 = false
				this.isShow40 = false
				this.isShow2 = false
				this.isShow20 = false
				this.closeTC30()
			},
			closeTC40() {
				this.isShow40 = false
			},
			zpxq(i) {
				// lottery/lottery/status
				console.log(i);
				console.log(this.lottery_Items);
				this.lottery_Items.forEach((item, index) => {

					if (i == index) {
						this.djjpdata = item
						console.log(this.djjpdata);
						this.isShow40 = true
					}
				})
			},
			showTC(index) {
				let aa = index + 1
				let cc = this.pageNum
				let num = String(cc) + aa
				if (cc == 1) {
					num = aa
				} else {
					if (aa == 10) {
						num = cc * 10
					} else {
						num = Number((String(cc) - 1) + String(aa))
					}
				}

				console.log(num);
				uniRequest.post('lottery/lottery/list?is_self=true', {
					"pageNum": num,
					"pageSize": 1,
					"sortField": "create_time",
					"sortOrder": "desc",
					"search": {}
				}).then((res) => {
					if (res.data.data.data[0].item_type == 5) {
						this.ittype = 5
						this.ewmtp = res.data.data.data[0].qr_code
						this.getewm()
					} else {
						this.ittype = res.data.data.data[0].item_type
					}
					console.log("中奖纪录");
					console.log(res);
					this.jpitem = res.data.data.data[0]
					console.log(this.jpitem);
					// if (res.data.code == "1002") {
					// 	this.showToken = true
					// }

					this.openTC30()
					console.log(index);
				}).catch((err) => {
					console.log(err);
				});

			},
			getBSF() {
				console.log(this.$refs.onebigbox.$el.attributes[0].name);
				if (this.$refs.onebigbox.$el.attributes[0].name) {
					this.bsf = '-' + this.$refs.onebigbox.$el.attributes[0].name
				}

			},
			goewm() {
				console.log(this.ewmlj);
				location.href = this.ewmlj
			},
			getewm() {
				uni.request({
					method: "GET",
					url: 'http://113.31.109.223:8000/lottery/lottery/qrcode?qrcode=' + this.ewmtp,
					responseType: 'arraybuffer',
					success: (res) => {
						console.log(res.data)
						this.ewmtp = 'data:image/jpeg;base64,' + uni.arrayBufferToBase64(res.data)
						uni.hideLoading()
					},
					header: {
						Authorization: uni.getStorageSync('token'),
						'content-type': 'image/*'
					},
				})
				// uniRequest.get('lottery/lottery/qrcode?qrcode='+ obj.qr_code).then((res) => {

				// 	console.log(res);
				// 	this.ewmtp='data:image/png;base64,' + uni.arrayBufferToBase64(res.data)

				// 	console.log(this.ewmtp);
				// 	
				// }).catch((err) => {
				// 	console.log(err);
				// });
			},
			closeTC30() {
				this.closeTC()
				this.isShow30 = false

			},
			openTC30() {
				this.openTC()
				this.isShow30 = true
			},
			getAddresslist() {
				// this.list.name=this.datalist[0].full_name

				uniRequest.post('lotteryaddress/lotteryaddress/list?is_self=true', {
					"pageNum": 1,
					"pageSize": 10,
					"search": {}
				}).then((res) => {
					console.log(res);
					if (res.data.data.data.length != 0) {
						res.data.data.data.forEach((item, index) => {
							if (item.is_default == 1) {
								this.address = item.address
							}
						})
					} else {
						this.address = '暂未绑定收货地址'
					}

				}).catch((err) => {
					console.log(err);
				});
			},
			openTC1_1() {
				if (this.jiangping.name == "暂无") {
					this.isShow10 = true
					this.msg = '您还未获得奖品哦！'
					return
				} else {
					this.openTC1()
				}

			},
			bsXz() {
				console.log(this.$refs.zp);
			},
			cleartoken() {
				this.showToken = false
				uni.clearStorage();
				this.$router.go(0)
			},
			ShouSuo1(item) {
				// console.log(11);
				// item.height=100
				uni.removeStorageSync('xsbot' + item);
				this.getchouJlist(item)
				this.height = 100
				this.isShowfa = false
			},
			ShouSuo(item) {
				console.log(item);
				uni.setStorageSync('xsbot' + item, 1)
				this.getchouJlist(item)
				// item.height=160
				// console.log(this.$refs);
				// console.log(this.$refs.index);
				this.height = 160
				this.isShowfa = true
			},
			fixaddress() {
				uni.navigateTo({
					url: "/pages/Mypage/IsAddress/IsAddress"
				})
			},
			fixaddress1() {
				uni.navigateTo({
					url: "/pages/Mypage/ShopAddress/ShopAddress"
				})
			},
			getchouJlist(index) {
				uniRequest.post('lottery/lottery/list?is_self=true', {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"sortField": "create_time",
					"sortOrder": "desc",
					"search": {}
				}).then((res) => {
					console.log("中奖纪录");
					console.log(res);
					if (res.data.code == "1002") {
						this.showToken = true
					}

					this.jiangping = res.data.data.data
					this.count = res.data.data.count
					this.jiangping.forEach((item, index) => {
						if (item.item_type == 3) {
							item.height = 100
						}
						if (uni.getStorageSync('xsbot' + index)) {
							item.kai = 'aa'
						} else {
							item.kai = 'bb'
						}
					})
					// this.data = res.data.data.data
					// this.jiangping.item_type = res.data.data.data[0].item_type
					// this.jiangping.name = res.data.data.data[0].item_name
					// this.jiangping.icon = res.data.data.data[0].item_icon

					// this.jiangping.time = res.data.data.data[0].create_time


					// console.log();
					// if (res.data.data.data[0].express_address == '') {
					// 	this.jiangping.address = "暂无"
					// } else {
					// 	this.jiangping.address = res.data.data.data[0].express_address.split(',')[2]
					// }
					// // this.jiangping.address=res.data.data.data[0].express_address.split(',')[2]
					// if (res.data.data.data[0].express_order == '') {
					// 	this.jiangping.order = "暂无"
					// } else {
					// 	this.jiangping.order = res.data.data.data[0].express_order
					// }
				}).catch((err) => {
					console.log(err);
				});
			},
			Rafflestatus() {
				uniRequest.post('lottery/lottery/status').then((res) => {
					console.log(res);
					this.lottery_Items = res.data.data.lottery_Items
					this.shengyu = res.data.data.my_data.remain_times
				}).catch((err) => {
					console.log(err);
				});
			},
			xhxz(res) {
				for (let i = 0; i < this.lottery_Items.length; i++) {
					if (this.lottery_Items[i].item_name == res.item_name) {
						uni.setStorageSync('i', i)
						uni.setStorageSync('jplevel', this.lottery_Items[i].level)
						this.jplevel = uni.getStorageSync('jplevel')
						this.i = uni.getStorageSync('i')
						return
					}

				}
			},
			xzdong(res) {
				console.log(res);
				this.xhxz(res)
				this.dong = 'running'
				setTimeout(() => {
					this.dong = 'paused'
					this.openTC30()

				}, 6800)
				setTimeout(() => {
					this.zcchoujiang = true
					this.getchouJlist()
				}, 7000)
				setTimeout(() => {
					// this.dong = 'running'
					this.i = 6
					console.log(this.i);
				}, 6999)

			},
			cjopenTC() {


				this.Raffle()





			},
			Raffle() {
				this.getAddresslist()
				uniRequest.post('lottery/lottery/lottery').then((res) => {
					console.log('抽奖');
					console.log(res);
					this.ittype = res.data.data.item_type

					if (res.data.code == "0000") {
						this.zcchoujiang = false
						this.shengyu = res.data.data.remain_times
					}
					if (res.data.data.item_type == 5) {
						this.ewmtp = res.data.data.qr_code
						this.ewmlj = res.data.data.qr_code_url
						this.getewm()
					}
					if (res.data.code == "1001") {
						this.msg = res.data.msg
						this.isShow10 = true
						// alert(res.data.msg)
						return;
					}
					this.jpitem = res.data.data
					if (this.jpitem.item_type == 1) {
						this.isShow20 = true
					}
					if (this.address == '暂未绑定收货地址' && this.ittype == 3) {
						this.isShow10 = true
						this.msg = '您还没有绑定收货地址哦!'
						// this.getchouJlist()
						return
					}
					if (res.data.msg == "你没有绑定收货地址") {
						// this.shengyu=23
						this.msg = res.data.msg
						this.isShow10 = true
						// alert("请先绑定收货地址")

						uni.navigateTo({
							url: '/pages/Mypage/IsAddress/IsAddress'
						});

						return
					};


					this.xzdong(res.data.data)

				}).catch((err) => {
					console.log(err);
				});
			},
			closeTC20() {
				this.isShow20 = false
				// this.closeTC()
			},
			closeTC10() {
				this.isShow10 = false

			},
			...mapMutations(['closeTC', 'closemackNum', 'openTC', 'openTC1', 'closeTC1', 'changeicondzp']),
			// closeTC() {
			// 	this.mackNum = 0
			// 	this.isShow = !this.isShow
			// 	console.log(this.isShow);
			// },
			// add() {
			// 	if (this.data.length != 0) {
			// 		this.num++
			// 		this.pageNum = this.num
			// 		this.height = 100
			// 		this.isShowfa = false
			// 		this.getchouJlist()
			// 	}

			// },
			// reduce() {
			// 	if (this.num > 1) {
			// 		this.num--
			// 		this.height = 100
			// 		this.isShowfa = false
			// 		this.pageNum = this.num
			// 		this.getchouJlist()
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}

	@keyframes move25 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);


			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			transform: rotateZ(3690deg);
			-webkit-transform: rotateZ(3690deg);
			-moz-transform: rotateZ(3690deg);
			-o-transform: rotateZ(3690deg);
		}
	}

	@-webkit-keyframes move25 {
		0% {
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);

		}

		100% {
			-webkit-transform: rotateZ(3690deg);
			-moz-transform: rotateZ(3690deg);
			-o-transform: rotateZ(3690deg);

		}
	}

	@keyframes move23 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			transform: rotateZ(3810deg);
			-webkit-transform: rotateZ(3810deg);
			-moz-transform: rotateZ(3810deg);
			-o-transform: rotateZ(3810deg);
		}
	}

	@-webkit-keyframes move23 {
		0% {
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			-webkit-transform: rotateZ(3810deg);
			-moz-transform: rotateZ(3810deg);
			-o-transform: rotateZ(3810deg);

		}
	}


	@keyframes move24 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			transform: rotateZ(3630deg);
			-webkit-transform: rotateZ(3630deg);
			-moz-transform: rotateZ(3630deg);
			-o-transform: rotateZ(3630deg);
		}
	}

	@-webkit-keyframes move24 {
		0% {

			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			-webkit-transform: rotateZ(3630deg);

			-moz-transform: rotateZ(3630deg);
			-o-transform: rotateZ(3630deg);

		}
	}


	@keyframes move22 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			transform: rotateZ(3870deg);
			-webkit-transform: rotateZ(3870deg);
			-moz-transform: rotateZ(3870deg);
			-o-transform: rotateZ(3870deg);
		}
	}

	@-webkit-keyframes move22 {
		0% {

			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			-webkit-transform: rotateZ(3870deg);


			-moz-transform: rotateZ(3870deg);
			-o-transform: rotateZ(3870deg);

		}
	}




	@-webkit-keyframes move21 {
		0% {

			-webkit-transform: rotateZ(60deg);

			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			-webkit-transform: rotateZ(3570deg);

			-moz-transform: rotateZ(3570deg);
			-o-transform: rotateZ(3570deg);

		}
	}

	@keyframes move21 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);
		}

		100% {
			transform: rotateZ(3570deg);
			-webkit-transform: rotateZ(3570deg);
			-moz-transform: rotateZ(3570deg);
			-o-transform: rotateZ(3570deg);
		}
	}

	@-webkit-keyframes move26 {
		0% {

			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);

		}

		100% {
			-webkit-transform: rotateZ(3750deg);
			-moz-transform: rotateZ(3750deg);
			-o-transform: rotateZ(3750deg);

		}
	}

	@keyframes move26 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);

		}

		100% {
			transform: rotateZ(3750deg);
			-webkit-transform: rotateZ(3750deg);
			-moz-transform: rotateZ(3750deg);
			-o-transform: rotateZ(3750deg);

		}
	}

	@-webkit-keyframes move20 {
		0% {

			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);

		}

		100% {
			-webkit-transform: rotateZ(3750deg);
			-moz-transform: rotateZ(3750deg);
			-o-transform: rotateZ(3750deg);

		}
	}

	@keyframes move20 {
		0% {
			transform: rotateZ(60deg);
			-webkit-transform: rotateZ(60deg);
			-moz-transform: rotateZ(60deg);
			-o-transform: rotateZ(60deg);

		}

		100% {
			transform: rotateZ(3750deg);
			-webkit-transform: rotateZ(3750deg);
			-moz-transform: rotateZ(3750deg);
			-o-transform: rotateZ(3750deg);

		}
	}

	.dtP {
		div {
			background-size: auto;
		}
	}

	//  .uni-tabbar{
	// 	filter: blur(3px) !important;
	// }
	@keyframes tdtc {
		0% {
			transform: scale(0.8);
			// transform: scale(0.8);  
			opacity: 0.5;
		}

		// 50% {
		// 	transform: scale(1);  
		// 	// opacity: 0.5;  
		// }
		45% {
			transform: scale(1);
			opacity: 1;
		}

		// 90% {
		// 	transform: scale(1);
		// 	opacity: 1; 
		// }
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.tcdh {
		animation-name: tdtc;
		animation-duration: 0.9s;
		animation-timing-function: cubic-bezier(0.01, 1.24, 0.08, 1.36);
		animation-iteration-count: 1;
		animation-play-state: running;
	}

	.TC {
		animation-name: tdtc;
		animation-duration: 0.9s;
		transform-origin: 350rpx 500rpx;
		animation-timing-function: cubic-bezier(0.01, 1.24, 0.08, 1.36);
		animation-iteration-count: 1;
		animation-play-state: running;

		.bj {
			background-image: url('@/static/icon/icon6/getcd.png');
			width: 100%;
			background-position: 100% 100%;
			background-size: 100%;
			height: calc(92vh);
			position: absolute;
			z-index: 97;
		}

		// z-index: 1000;
		.toptext {
			position: absolute;
			// top: -8%;
			top: 100rpx;
			left: 35%;
			z-index: 999;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.text-a {

				font-size: 46rpx;
			}

			.text-b {
				color: rgb(148, 113, 254);
				font-size: 32rpx;
			}
		}

		height: 100%;
		background-color: rgb(255, 255, 255);

		// background: linear-gradient(#7a52c0, #d7d7d7) no-repeat;
		.title {
			text-align: center;
			line-height: 100rpx;
			font-size: 60rpx;
			color: rgb(164, 133, 237);
		}

		.bigbox {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					.yd1 {
						// margin: 16rpx 0px;
						font-size: 34rpx;
						color: rgb(244, 120, 189);
						text-align: center;
						width: 58%;
						background-position: 100%;
						background-size: 100% 48%;
						background-repeat: no-repeat;
						background-image: url('@/static/icon/icon6/getjlicon.png');
					}

					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 300px;
					align-items: center;

					image {
						width: 490rpx;
						height: 320rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 94%;
				height: 40rpx;
				background-color: #fffefe7d;
				box-shadow: 0px 10rpx 100rpx #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 3%;
				bottom: -40rpx;
				// /* z-index: -1;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;

			box-sizing: border-box;
			// padding: 48rpx;
			box-shadow: 0px 10rpx 20rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 80%;
			height: 1096rpx;
			border-radius: 2%;
			top: 84rpx;
			left: 10%;

			.btnA {

				width: 52%;
				margin: 0px auto;
				// margin-top: 40%;
				margin-top: 16rpx;

				uni-button {
					font-size: 30rpx;
					height: 98rpx;
					line-height: 98rpx;
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}

		.box {
			z-index: 99;
			background-color: #fff;

			.box1 {

				// margin-top: 20rpx;
				.box1-a {
					.yd {
						margin: 16rpx 0px;
						font-size: 34rpx;
						color: rgb(244, 120, 189);
						text-align: center;
						width: 64%;
						background-position: 100%;
						background-size: 100% 48%;
						background-repeat: no-repeat;
						background-image: url('@/static/icon/icon6/getjlicon.png');
					}

					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 300px;
					align-items: center;

					image {
						width: 490rpx;
						height: 332rpx;
					}
				}
			}

			.send {
				position: absolute;
				right: 52rpx;

				uni-button {
					border-radius: 100rpx;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
					width: 144rpx;
					background: rgb(121, 72, 234);
					font-size: 28rpx;
				}
			}

			.box2-a {
				width: 84%;
				height: 56rpx;
				background-color: #fffefe7d;
				box-shadow: 0px 10rpx 100rpx #9e9e9e3b;
				border-radius: 0rem 0rem 10px 10px;
				/* opacity: 0.4; */
				position: absolute;
				left: 7%;
				bottom: -54rpx;
			}

			.u-input--border[data-v-fdbb9fe6] {
				border-radius: 100rpx;
				height: 96rpx;
				box-sizing: border-box;
				padding-top: 8rpx !important;
				margin-left: 10rpx;
			}

			.username {
				font-size: 18px;
				display: flex;
				align-items: center;

				image {
					width: 16px;
					height: 16px;
					margin-right: 4px;
				}
			}

			.password {
				font-size: 18px;
				display: flex;
				align-items: center;
				margin-top: 30px;

				image {
					width: 16px;
					margin-right: 4px;
					height: 16px;
				}
			}

			.sms {
				display: flex;
				justify-content: end;
				color: rgb(164, 133, 237);
				padding: 10% 0;
				padding-bottom: 12%;
				margin-right: 36rpx;
			}

			z-index: 99;
			background-color: #fff;

			box-sizing: border-box;
			// padding: 48rpx;
			box-shadow: 0px 10rpx 20rpx #9e9e9e80;
			position: absolute;
			background: #fff;
			width: 70%;
			height: 776rpx;
			border-radius: 2%;
			top: 180rpx;
			left: 15%;

			.btnA {

				width: 52%;
				margin: 0px auto;
				// margin-top: 40%;
				margin-top: 41rpx;

				uni-button {
					font-size: 30rpx;
					height: 110rpx;
					line-height: 110rpx;
					border-radius: 64rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}

			.btnB {
				width: 60%;

				uni-button {
					margin-top: 20rpx;
					border-radius: 32px;
					color: #7a52c0;
				}

				margin: 0px auto;
			}
		}
	}

	.mack-a {
		position: relative;

		// z-index: 998;
		.fPage {
			width: 100%;

			// background-color: #fff;
			// position: fixed;
			// bottom: 0rpx;
			// left: 21%;
			.NumberBox {
				margin: 0px auto;
				color: rgb(182, 158, 254);
				display: flex;
				align-items: center;
				width: 60%;
				justify-content: space-around;

				font-size: 26rpx;
			}
		}

		.pagelist {
			width: 100%;
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 0rpx 24rpx;
			border-radius: 10rpx;

			.listname {
				.ln-top {
					display: flex;
					height: 100%;
					width: 100%;
				}

				.ln-bottom {
					border-top: 2rpx solid rgb(242, 242, 242);
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					height: 130rpx;
					width: 630rpx;
					color: rgb(202, 202, 202);
					font-size: 26rpx;

				}

				margin-bottom: 8rpx;
				background-color: #fff;
				// margin: 24rpx 0;
				// height: 320rpx;
				flex-direction: column;
				display: flex;
				align-items: center;
				justify-content: space-around;
				// box-shadow: 0px 5px 50px #9e9e9e80;
				box-shadow: 0px 2px 12px #9e9e9e80;

				.Bb {
					font-size: 32rpx;
					color: #000;
				}

				.Mg {
					font-size: 26rpx;
					color: #CACACA;

					.states {
						display: flex;
						flex-direction: column;

						image {
							width: 30rpx;
							height: 64rpx;
							margin-left: 20rpx;
						}
					}
				}

				.list {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 200rpx;

					image {
						width: 128rpx;
						height: 128rpx;
						margin: 0rpx 10rpx;
						margin: 0px 34rpx;
						// margin-right: 46rpx;
					}
				}
			}
		}

		.LargeTop {
			position: relative;

			.top-a {
				position: absolute;
				width: 100%;
				bottom: -12%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				background-color: #fff;

				.rem {
					margin: 6rpx 0;
					color: rgb(148, 113, 254);
					text-align: center;
					width: 42%;
					background-position: 100%;
					background-repeat: no-repeat;
					background-size: 100% 60%;
					background-image: url('@/static/icon/icon1/fz10.png');
				}

				.time {
					display: flex;
					align-items: center;
					color: #F478BD;
					// font-size: 34rpx;
					font-size: 28rpx;

					image {
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.topimg {
				$jd: 60deg;

				@-webkit-keyframes move12 {
					0% {
						transform: rotateZ(270deg);
					}

					100% {
						transform: rotateZ(3870deg);
					}
				}

				@-webkit-keyframes move12 {
					0% {
						transform: rotateZ(270deg);
					}

					100% {
						transform: rotateZ(3870deg);
					}
				}

				@keyframes move12 {
					0% {
						transform: rotateZ(270deg);
					}

					100% {
						transform: rotateZ(3870deg);
					}
				}

				@keyframes move13 {
					0% {
						transform: rotateZ(180deg);
					}

					100% {
						transform: rotateZ(3780deg);
					}
				}

				@keyframes move10 {
					0% {
						transform: rotateZ(90deg);
					}

					100% {
						transform: rotateZ(3690deg);
					}
				}

				@keyframes move11 {
					0% {
						transform: rotateZ(0deg);
					}

					100% {
						transform: rotateZ(3600deg);
					}
				}

				@keyframes move14 {
					0% {
						transform: rotateZ(45deg);
					}

					100% {
						transform: rotateZ(3600deg);
					}
				}


				.xz {

					// animation: name 3s 0s ;
					// animation: move10 7s ease-in-out infinite;
					// 1热水壶 0苹果 3NFT 4兑换码
					position: absolute;
					z-index: 888;
					transform-origin: 50.25% 44.4%;

					background-image: url('../../../static/icon/xz4.png');
					background-position: 100% 100%;
					background-repeat: no-repeat;
					background-size: 100%;
					width: 660rpx;
					margin-top: 60rpx;
					height: 670rpx;

					.tb-x0 {
						// animation: move20 7s 0s ease-in-out infinite;
						transform: rotateZ(210deg) !important;
						z-index: 9999;

						image {
							border-radius: 40px;
						}

						.zpwz {
							transform: rotateZ(0deg) !important;

							transform-origin: 49% 186%;
						}

						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: 314rpx;
						left: 212rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.tb-x1 {
						z-index: 9999;
						// animation: move20 7s 0s ease-in-out infinite;
						transform: rotateZ(0deg) !important;
						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: 140rpx;
						left: 312rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.zpwz {
							transform: rotateZ(32deg) !important;
							transform-origin: 49% 186%;
						}

						image {
							border-radius: 40px;
						}
					}

					.tb-x2 {
						z-index: 9999;

						image {
							border-radius: 40px;
						}

						// animation: move20 7s 0s ease-in-out infinite;
						transform: rotateZ(90deg) !important;
						top: 222rpx;
						left: 360rpx;
						position: absolute;
						// top: 242rpx;
						// left: 412rpx;
						width: 144rpx;
						height: 144rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.tb-x3 {
						z-index: 9999;

						image {
							border-radius: 40px;
						}

						.zpwz {
							transform: rotateZ(332deg) !important;
							transform-origin: 50% 186%;
						}

						transform: rotateZ(180deg) !important;
						// animation: move20 7s 0s ease-in-out infinite;
						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: 314rpx;
						left: 308rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
					}


				}

				.tb-x4 {
					z-index: 9999;

					image {
						border-radius: 40px;
					}

					.zpwz {
						transform: rotateZ(151deg) !important;
						transform-origin: 49% 186%;
					}

					transform: rotateZ(180deg) !important;
					// animation: move20 7s 0s ease-in-out infinite;
					width: 144rpx;
					height: 144rpx;
					position: absolute;
					top: 138rpx;
					left: 208rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}



				.tb-x5 {
					z-index: 9999;

					image {
						border-radius: 40px;
					}

					.zpwz {
						transform: rotateZ(89deg) !important;
						transform-origin: 49% 186%;
					}

					transform: rotateZ(180deg) !important;
					// animation: move20 7s 0s ease-in-out infinite;
					width: 144rpx;
					height: 144rpx;
					position: absolute;
					top: 232rpx;
					left: 156rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}




				display: flex;
				justify-content: center;
				background-color: #fff;
				position: relative;

				image {
					margin-top: 66rpx;
					width: 604rpx;
					height: 614rpx;
				}
			}

			.toptext {
				position: absolute;
				top: 3%;
				left: 50%;
				z-index: 999;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transform: translate(-50%, 0);

				.text-a {

					font-size: 46rpx;
				}

				.text-b {
					color: rgb(148, 113, 254);
					font-size: 32rpx;
				}
			}
		}
	}
</style>
